<template>
  <div>
    <!-- Navbar -->
    <navBar title="极速问诊">
      <button class="save" @click="$router.push('/consult')">问诊记录</button>
    </navBar>
    <div class="picture">
      <img
        class="img"
        src="@/assets/upload/image-text-illustration@2x.png"
        alt=""
      />
      <div class="fast"><span class="time">20s</span> 快速匹配专业医生</div>
    </div>
    <div class="list">
      <div class="cell" @click="onClick(1)">
        <div class="left">
          <img class="photo" src="@/assets/upload/hospital-image-text@2x.png" />
          <div>
            <div class="title">三甲图文问诊</div>
            <div class="text">三甲主治及以上级别医生</div>
          </div>
        </div>
        <van-icon class="right" name="arrow" />
      </div>
      <div class="cell" @click="onClick(0)">
        <div class="left">
          <img class="photo" src="@/assets/upload/speed-image-text@2x.png" />
          <div>
            <div class="title">普通图文问诊</div>
            <div class="text">二甲主治及以上级别医生</div>
          </div>
        </div>
        <van-icon class="right" name="arrow" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

const onClick = (step) => {
  router.push('/consult/dep')
  store.commit('illness/setIllnessType', step)
}
</script>

<style lang="scss" scoped>
  .save {
    border: 0;
    background-color: unset;
    color: #16c2a3;
    font-size: 30px;
  }
.picture {
  margin-top: 90px;
  padding: 60px 0;
  text-align: center;
  .img {
    margin-bottom: 20px;
    width: 481px;
  }
  .fast {
    font-size: 32px;
    .time {
      color: #16c2a3;
    }
  }
}
.list {
  padding: 30px;
  .cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #ededed;
    .left {
      display: flex;
      .photo {
        margin-right: 20px;
        border-radius: 50%;
        width: 86px;
        height: 86px;
      }
      .title {
        margin-bottom: 10px;
        font-size: 32px;
      }
      .text {
        font-size: 26px;
        color: #848484;
      }
    }
    .right {
      font-size: 28px;
      color: #848484;
    }
  }
}
</style>
